<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // Promise实例的链式操作 => 原理Promise对象的then() catch() finally() 返回值都是Promise实例 => 后面可以继续接then方法()

    // Promise实例的链式操作
    //  1. Promise实例的then方法,不接受成功或失败的回调函数 => Promise实例的状态和存储的数据将继续向后传递
    //  2. Promise实例的then方法只指定成功时的回调函数,catch()指定失败的回调函数
    //  a. 如果回调函数返回值是非Promsie实例(基本数据) => 后续的回调函数会接收前面回调函数返回的结果,如果回调函数在执行过程中出现错误,错误的状态和数据将会继续想回传递,最终会被catch捕获 
    //     catch会捕获整个链式操作过程中的所有错误2
    //  b.如果回调函数返回值是一个新的Promsie实例, 链式操作(后续的回调函数)要等新的Promise实例状态改变后,才能继续向后传递 => 成功就走then,失败走catch 
    //  成功的更容器成功,一失足成千古恨


    // 成功的链式传递
    /* var p = getNumAsync(1,2000);// {<pending>:undef} 2s后变为{<fulfilled>:1}

    // p(pending)  => 2s (fulfilled:1)
    p.then(function(arg){ // 1
        console.log("fulfilled",arg);
        return getNumAsync(2,2000); // 返回Promise实例  2s后变为{<fulfilled>:2}
    }).then(function(arg){ // 2
        console.log("fulfilled",arg);
        return getNumAsync(3,2000); // 返回Promise实例  2s后变为{<fulfilled>:3};
    }).then(function(arg){ // 3
        console.log("fulfilled",arg);
        return getNumAsync(4,2000); // 返回Promise实例  2s后变为{<fulfilled>:4};
    }).then(function(arg){ // 4
        console.log("fulfilled",arg);
    }).catch(function(arg){
        console.log("rejected",arg);
    }) */


    /* 中途失败的链式传递 */
     var p = getNumAsync(1,2000);// {<pending>:undef} 2s后变为{<fulfilled>:1}

    // p(pending)  => 2s (fulfilled:1)
    p.then(function(arg){ // 1
        console.log("fulfilled",arg);
        return getNumAsync(2,2000,false); // 返回Promise实例  2s后变为{<rejected>:2}
    }).then(function(arg){ // 2
        console.log("fulfilled",arg);
        return getNumAsync(3,2000); // 返回Promise实例  2s后变为{<fulfilled>:3};
    }).then(function(arg){ // 3
        console.log("fulfilled",arg);
        return getNumAsync(4,2000); // 返回Promise实例  2s后变为{<fulfilled>:4};
    }).then(function(arg){ // 4
        console.log("fulfilled",arg);
    }).catch(function(arg){
        console.log("rejected",arg);
    })















    // 此方法默认返回pending状态的Promise对象,等待指定事件之后,变为成功/失败状态  
    // 目的: 1. 复用  2. 调用时才执行
    function getNumAsync(num,delay=0,isFulfilled=true){
        var p = new Promise(function(resolve,reject){
            // 回调函数 -> 容器 -> 用来存放异步操作 (根据异步操作的结果改变状态)
            setTimeout(()=>{
                isFulfilled? resolve(num):reject(num); // {<fulfilled>:1}
                console.log(p); 
            },delay);
        })
        return p;  // {<pending>:undefined}
    }
   

</script>
</html>